<template>
    <mu-card class="friendly">
        <mu-card-header title="关注的会员列表"></mu-card-header>
        <mu-card-media style="min-height:5px;">
            <mu-linear-progress v-show="is_loading_list_info" />
        </mu-card-media>
        <mu-card-text>
            <mu-table :fixedHeader="false"
                      height="48vh"
                      :enableSelectAll="false"
                      :multiSelectable="false"
                      :selectable="false"
                      :showCheckbox="false">
                <mu-thead class="sticky-header"
                          slot="header">
                    <mu-tr>
                        <mu-th :touch="true"
                               style="width:160px"
                               tooltip="昵称">昵称</mu-th>
                        <mu-th :touch="true"
                               style="width:160px"
                               tooltip="地域">地域</mu-th>
                        <mu-th :touch="true"
                               style="width:80px"
                               tooltip="性别">性别</mu-th>
                        <mu-th :touch="true"
                               style="width:200px"
                               tooltip="注册时间">注册时间</mu-th>
                        <mu-th :touch="true"
                               style="width:200px"
                               tooltip="最后登录时间">最后登录时间</mu-th>
                    </mu-tr>
                </mu-thead>
                <mu-tbody>
                    <mu-tr v-for="item,index in list_info.list"
                           :key="index">
                        <mu-td>
                            <div class="avatar">
                                <img :src="item.headimgurl">
                                <span class="left-margin">{{item.nickname}}</span>
                            </div>
                        </mu-td>
                        <mu-td>{{item.city||'???'}},{{item.province||'???'}}</mu-td>
                        <mu-td>{{getSex(item.sex)}}</mu-td>
                        <mu-td :title='formatDate(item.create_time,"LLLL")'>{{formatDate(item.create_time)}}</mu-td>
                        <mu-td :title='formatDate(item.last_login_time,"LLLL")'>{{formatDate(item.last_login_time)}}</mu-td>
                    </mu-tr>
                </mu-tbody>
            </mu-table>
        </mu-card-text>
        <mu-card-actions>
            <mu-pagination :total="total"
                           :current="list_info.page"
                           :pageSize="list_info.num"
                           :showSizeChanger="true"
                           :pageSizeOption="[10,20,50]"
                           @pageChange="handleCurrentChange"
                           @pageSizeChange="handleSizeChange">
            </mu-pagination>
        </mu-card-actions>
    </mu-card>
</template>
<script>
import {
    getSex,
    formatDate,
    fetchServer,
} from '../../../unit';

function loadUserListPageData(current_route, callback) {
    callback(vm => vm.is_loading_list_info = true);
    fetchServer("/admin/user/list", {
        query: {
            num: current_route.query.num,
            page: current_route.query.page
        }
    }).then(list_info => {
        callback(vm => {
            vm.is_loading_list_info = false
            vm.list_info = list_info
        });
    }).catch(err => callback(err));

    fetchServer("/admin/user/list/total").then(total_info => {
        callback(vm => vm.total = total_info.total)
    }).catch(err => callback(err))
}

export default {
    data() {
        return {
            __beforeRoute_load_data__: false,
            is_loading_list_info: false,
            list_info: {
                list: [],
                page: 1,
                num: 10,
            },
            current_page: 1,
            total: 0,
        }
    },
    beforeRouteEnter(to, from, next) {
        console.log("beforeRouteEnter")
        let vm;
        const cbs = [];
        next(_vm => {
            vm = _vm;
            vm.__beforeRoute_load_data__ = true;
            cbs.forEach(cb => cb(vm));
            cbs.length = 0;
        });
        loadUserListPageData(to, (cb) => {
            if (cb instanceof Function) {
                if (!vm) {
                    cbs.push(cb)
                } else {
                    cb(vm)
                }
            };
        })
    },
    created() {
        window.v = this;
        window.r = this.$router;
    },
    mounted() {
    },
    beforeUpdate() {
        console.log("before update");
        if (!this.__beforeRoute_load_data__) {
            console.log("load data")
            this.__beforeRoute_load_data__ = true;
            loadUserListPageData(this.$route, cb =>
                cb instanceof Function && cb(this)
            );
        }
    },
    methods: {
        getSex: getSex,
        formatDate:formatDate,
        handleSizeChange(new_size) {
            const router = this.$router;
            const current_route = this.$route;
            const query = Object.assign({}, current_route.query, { num: new_size, page: 1 });
            router.push({
                path: current_route.path,
                query
            });
        },
        handleCurrentChange(new_page) {
            const router = this.$router;
            const current_route = this.$route;
            const query = Object.assign({}, current_route.query, { page: new_page });
            router.push({
                path: current_route.path,
                query
            });
        }
    },
    watch: {
        "list_info.page"(page) {
            this.current_page = page + 1;
        },
        "$route.query"(new_query) {
            console.log("query changed", new_query);
            loadUserListPageData(this.$route, cb =>
                cb instanceof Function && cb(this)
            );
        },
    }
}
</script>
<style >
.avatar {
    display: flex;
    align-items: center;
}

.avatar img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.left-margin {
    margin-left: 10px;
}

.sticky-header {
    position: -webkit-sticky;
    position: sticky;
    background: #ddd;
    top: 0px;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}
</style>